<template>
  <div id="teamCardList">
    <van-card
        v-for="team in teamList"
        :thumb="logo"
        :desc="team.description"
        :title="`${team.name} 最大人数：${team.maxNum}`"
    >
      <template #tags>
        <van-tag plain type="danger"  style="margin-right: 8px; margin-top: 8px">
          {{ teamStatusEnum[team.teamStatus] }}
        </van-tag>
      </template>
      <template #bottom>
        <div>
          {{ `队伍人数：${team.hasJoinNum}/${team.maxNum}` }}
        </div>
        <div v-if="team.expireTime">
          {{`过期时间：${team.expireTime}`}}
        </div>
        <div v-if="team.createTime">
          {{`发布时间：${team.createTime}`}}
        </div>
      </template>
      <template #footer>
        <van-button size="mini" type="warning" plain @click="doExitTeam(team.id)">退出队伍</van-button>
      </template>
    </van-card>

  </div>
  <van-empty v-if="!teamList || teamList.length < 1" description="数据为空"/>
</template>
<script setup lang="ts">

import {onMounted, ref} from "vue";
import {teamStatusEnum} from "../constants/team.ts";
import {showFailToast} from "vant";
import {useRouter} from "vue-router";
import type {TeamType} from "../models/team";
import myAxios from "../plugins/myAxios";
import logo from "../assets/ipad.jpeg";

const teamList = ref<TeamType[]>([]);
const router = useRouter();

onMounted(() => {
  searchTeamsByUserId();
})

const searchTeamsByUserId = async () => {
  const res = await myAxios.get('/team/list/my/join');
  if (res?.code === 0){
    teamList.value = res.data;
  }else {
    showFailToast('请求错误');
  }
}

const doExitTeam = async (id:any) => {
  const res = await myAxios.post('/team/quit',{
    teamId: id
  });
  if (res?.code === 0){
    teamList.value = res.data;
    router.push({
      path: '/my/page',
      replace: true
    })
  }else {
    showFailToast('退出失败');
  }
}

</script>

<style scoped>
#teamCardList :deep(.van-image__img){
  height: 120px;
  object-fit: unset;
}
</style>